

<!--script type="text/javascript"> 
	/*$(document).ready(function () { 
 		$("a").click(function (event){
				//alert('Me 2 RLEB');
   			var plop = $(this).parents("div").children("table").children("tr:last");
   			plop.after(plop.clone(true).hide());
   			$(this).parents("div").children("fieldset:last").fadeIn("slow");
   			//alert($(this).parents("div"));
   			//$(this).parents("div").children("fieldset:last").children("input").value('toto');
   			$(this).parents("div").children("fieldset:last").children("input").attr('value','only this one');
   			$(this).parents("div").children("fieldset:last").children("input").attr('name','data[1]');
   			$(this).parents("div").children("fieldset:last").children("input").attr('id','data[1]');

   			//alert(document.getElementById('data[1]').value);
   		});
	});*/
</script-->

<script type="text/javascript">
	
// jQuery(function($) {
// 	var $tbody = $('#tbodyLigne'),
// 		$btns = $tbody.find('.ajouterLigne'),
// 		addRow = function() {
// 			/*var $tr = $(this).parents('tr').eq(0),
// 				$newTr = $tr.clone(true); // ou $tr.clone(), en décommentant la ligne ci-dessous.
				
// 			//$newTr.find('.ajouterLigne').click(addRow);
// 			$tr.after($newTr);


// 			//alert($newTr.children().children("input").val());
// 			*/
// 			$tr = $(this).parents('tr').eq(0);
// 			$td = $tr.children('td');
// 			alert($tr);
// 			//$newTr = $tr.clone(true); // ou $tr.clone(), en décommentant la ligne ci-dessous.
						

// 			$('#examplez').dataTable().fnAddData( $tr );
// 		};
	
// 	$btns.click(addRow);
// });

/* Global var for counter */
// var giCount = 1;

/*$(document).ready(function() {
	$('#example').dataTable();
} );*/

// function fnClickAddRowq() {
// 	$tr = $(this).parents('tr').eq(0);
// 	alert($tr);
// 	$newTr = $tr.clone(true); // ou $tr.clone(), en décommentant la ligne ci-dessous.
				

// 	$('#example2f').dataTable().fnAddData( $newTr );
	
// 	giCount++;
// }

// fnServerObjectToArray = function ( aElements )
// {
//     return function ( sSource, aoData, fnCallback ) {
//         $.ajax( {
//             "dataType": 'json', 
//             "type": "POST", 
//             "url": sSource, 
//             "data": aoData, 
//             "success": function (json) {
//                 var a = [];
//                 for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
//                     var inner = [];
//                     for ( var j=0, jLen=70; j<jLen ; j++ ) {
//                         inner.push( '1' );
//                     }
//                     a.push( inner );
//                 }
//                 for ( var i=0, iLen=10 ; i<iLen ; i++ ) {
//                     var inner = [];
//                     for ( var j=0, jLen=70; j<jLen ; j++ ) {
//                         inner.push( '2' );
//                     }
//                     a.push( inner );
//                 }

//                 for ( var i=0, iLen=10 ; i<iLen ; i++ ) {
//                     var inner = [];
//                     for ( var j=0, jLen=70; j<jLen ; j++ ) {
//                         inner.push( '3' );
//                     }
//                     a.push( inner );
//                 }
//                 json.aaData = a;
//                 fnCallback(json);
//             }
//         } );
//     }
// }


/*
	Script pour charger le tableau en Ajax et pour le rendre editable en ajax.

	Attention: la fonction "submitdata" est specifique a ce tableau.
				Dans notre cas le nom de la colonne contenu dans le <th> 
				doit correspondre au nom de colonne dans la base de données
*/
$(document).ready(function() {
    /* Init DataTables */
    var table2_id='#myDataTable';
    var aSelected = [];
    /************************************************************************************/
	//GESTION des filtres sur chaque colonnes 
	//************************************************************************************/
	// Use the elements to store their own index 
	$("thead input").each( function (i) {
		this.visibleIndex = i;
	} );
	
	$("thead input").keyup( function () {
		//If there is no visible index then we are in the cloned node
		var visIndex = typeof this.visibleIndex == 'undefined' ? 0 : this.visibleIndex;
		
		//Filter on the column (the index) of this element 
		oTable2.fnFilter( this.value, visIndex );
	} );
	
	//
	// Support functions to provide a little bit of 'user friendlyness' to the textboxes
	//
	$("thead input").each( function (i) {
		this.initVal = this.value;
	} );
	
	$("thead input").focus( function () {
		if ( this.className == "search_init" )
		{
			this.className = "";
			this.value = "";
		}
	} );
	
	$("thead input").blur( function (i) {
		if ( this.value == "" )
		{
			this.className = "search_init";
			this.value = this.initVal;
		}
	} );
	//************************************************************************************/

    var oTable2 = 
    $(table2_id).dataTable({
        "fnDrawCallback": function () {
            /* Apply the jEditable handlers to the table */
            // $('td', this.fnGetNodes()).editable( "http://localhost:8080/GestParamPhp/dynamiques/EditerLignes_ajax/<?php echo $satable['Table']['id'];?>", {
            //     "callback": function( sValue, y ) {
            //         var aPos = oTable2.fnGetPosition( this );
            //         oTable2.fnUpdate( sValue, aPos[0], aPos[1] );
            //         //oTable2.fnDraw();
            //     },
            //     "submitdata": function ( value, settings ) {
            //     	return {
	           //          //"row_id": this.parentNode.getAttribute('id'),
            //             "row": oTable2.fnGetPosition( this )[0],
            //             "column": oTable2.fnGetPosition( this )[2],
            //             /* dans row_id, on met l'id de la ligne (2eme colonne pour ce tableau)*/
            //             "row_id": $(this).parents('tr').eq(0).children('td').eq(1).text(),
				        // /* dans column_name, on met le text contenu dans le th. il doit correspondre
				        // au nom de la colonne de la base oracle*/
				        // "column_name" : $('#example2 thead th:eq('+ oTable2.fnGetPosition( this )[1] +')').attr("id")
	           //      };
            //     },
            //     "height": "100%"
            // } );
        },
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
			

            /* Pour chaque colonne de la ligne
				si la classe du <th> contient 'editable' 
				alors on met la classe editable sur le <td>
			*/
            /*for ( var i=0 ; i<$('td', nRow).length ; i++ ){
            	if ($( table2_id + ' thead th').eq(i).attr('class').indexOf("editable")>=0 ){
            		$('td', nRow).eq(i).attr('class','editable ' + $('td', nRow).eq(i).attr('class'));
            	}
            }*/
            /* Pour chaque colonne de la ligne on met l'attribut 'nowrap' */
            $('td', nRow).attr('nowrap','nowrap');
            return nRow;
        },
	 	"aoColumnDefs": [
			{ "bSortable": false, "sClass": "index", "aTargets": [ 0 ] }
		],
		"aaSorting": [[ 1, 'asc' ]],
        "bSortClasses": false,
        <?php //echo($aoColumnDefs); ?>
        //"bJQueryUI": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bLengthChange": true,
        "bInfo": true,
        "bAutoWidth": true,
 		"sScrollX": "100%",
 		//"sScrollXInner": "150%",
 		//"bScrollCollapse": true, 
        "bProcessing": true,
        "bServerSide": true,
        "bStateSave": false,
        "sAjaxSource": "../ChargerLignes_ajax/<?php echo $satable['Table']['id'];?>"
    } );
	
	 $('#myDataTable tbody tr').live('click', function () {
        var id = this.id;
        var index = jQuery.inArray(id, aSelected);
         
        if ( index === -1 ) {
            aSelected.push( id );
        } else {
            aSelected.splice( index, 1 );
        }
         
        $(this).toggleClass('row_selected');
    } );
	 
 	// new FixedColumns( oTable2, {
 	// 	"iLeftColumns": 1,
		// "iLeftWidth": 350
 	// } );
} );
     
// <!--///script-->

// <!--//script type="text/javascript" charset="utf-8"-->

// 	$(document).ready( function () {

// 		var table3_id='#myDataTable';

// 		var oTable3 = 
//         $(table3_id).dataTable({
// 	        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
// 				/* Pour chaque colonne de la ligne
// 					si la classe du <th> contient 'editable' 
// 					alors on met la classe editable sur le <td>
// 				*/
// 	            for ( var i=0 ; i<$('td', nRow).length ; i++ ){
// 	            	if ($(table3_id + ' thead th').eq(i).attr('class').indexOf("editable")>=0 &&
// 	            		!($('td', nRow).eq(i).attr('class').indexOf("editable")>=0)){
// 	            		$('td', nRow).eq(i).attr('class','editable ' + $('td', nRow).eq(i).attr('class'));
// 	            	}
// 	            }
// 	            /* Pour chaque colonne de la ligne on met l'attribut 'nowrap' */
// 	            $('td', nRow).attr('nowrap','nowrap');
// 	            return nRow;
// 	        },
// 	        //"bJQueryUI": true,
//             "bServerSide": true,
// 	        //"bStateSave": false,
// 	        //"bLengthChange": true,
// 	        //"bInfo": true,
// 	        //"bAutoWidth": true,
// 	        "bProcessing": true,
//         	"bPaginate": true,
//             "sPaginationType": "full_numbers",
//             "sAjaxSource": "../ChargerLignes_ajax/<?php echo $satable['Table']['id'];?>"
//             /*,
// 			"fnServerData": fnServerObjectToArray( [ 'id', 'codsoc', 'codtbl', 'cletbl', 'lib1' ] ),*/
// 			/*"fnServerData": function( sUrl, aoData, fnCallback ) {
//             	$.ajax( {
// 	                "url": sUrl,
// 	                "data": aaData,
// 	                "success": fnCallback,
// 	                "dataType": "jsonp",
// 	                "cache": false
// 	            } );

//         	}*//*,
//             "aoColumns":[
//             	{
//                 	"bVisible" : false
//                	},
//                 {},
//                 {},
//                 {},
//                 {}
//             ]*/
//         }).makeEditable({
//         	sUpdateURL:"../EditerLignes_ajax/<?php echo $satable['Table']['id'];?>",
// 			sAddURL: "../EditerLignes_ajax/<?php echo $satable['Table']['id'];?>",
//             sDeleteURL: "../EditerLignes_ajax/<?php echo $satable['Table']['id'];?>"
            
//             //sAddDeleteToolbarSelector: ".dataTables_length",
//             //,
//             /*oAddNewRowButtonOptions: { 
// 				//label: "Add...",
//                 icons: { primary: 'ui-icon-plus' }
//             },
//             oDeleteRowButtonOptions: {
// 				//label: "Remove",
//                 icons: { primary: 'ui-icon-trash' }
//             },*/
//             /*oAddNewRowOkButtonOptions: {
// 				label: "Confirm",
//                 icons: { primary: 'ui-icon-check' },
//                 name: "action",
//                 value: "add-new"
//             },*/
//             /*oAddNewRowCancelButtonOptions: { 
// 				label: "Close",
//                 class: "back-class",
//                 name: "action",
//                 value: "cancel-add",
//                 icons: { primary: 'ui-icon-close' }
//             },*/
//             /*oAddNewRowFormOptions: {
// 				title: 'Add a new browser - form',
//                 show: "blind",
//                 hide: "explode"
//             }*/
//             // {
//             /*,
//             fnOnEditing: function(input){ 	
// 				alert('rleb');
// 				$("#trace").append("Updating cell with value " + input.val());
// 				return true;
// 			}*/
//             /*,	
//             callback: function( sValue, y ) {
//                     var aPos = oTable3.fnGetPosition( this );
//                     oTable3.fnUpdate( sValue, aPos[0], aPos[1] );
//                     alert('callback');
//                     alert(Value);
//                     return(value);
//             }*/
//             /*,
//            	submitdata: function ( value, settings ) {
//            	  	//alert('submitdata');
//            	  	return {
// 			        // dans column_name, on met le text contenu dans le th. il doit correspondre
// 			        // au nom de la colonne de la base oracle
// 			         "rleb" : 'er'//$(table3_id +' thead th:eq('+ oTable3.fnGetPosition( this )[1] +')').attr("id")
//            	    };
//            	}*/
//             // ,	
//         	// sUpdateURL: function(value, settings)
//         	// {
//          	//      return(value);
//          	//    //Simulation of server-side response using a callback function
//         	// }
// 			/*,
// 			"aoColumns": [
// 				{
//                    cssclass: 'required'
// 				},
// 				{
// 					indicator: 'Saving platforms...',
//                     tooltip: 'Click to edit platforms',
//                     type: 'textarea',
//                     submit:'Save changes'
// 				},
// 				{
//                     indicator: 'Saving Engine Version...',
//                     tooltip: 'Click to select engine version',
//                    	loadtext: 'loading...',
// 				    type: 'select',
// 					onblur: 'cancel',
//                    	submit: 'Ok',
//                    	loadurl: 'EngineVersionList.php',
//                    	loadtype: 'GET'
// 				},
// 				{
//                    	indicator: 'Saving CSS Grade...',
//                    	tooltip: 'Click to select CSS Grade',
//                    	loadtext: 'loading...',
// 				    type: 'select',
// 					onblur: 'submit',
//                    	data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}"
//                 }
// 			]	*/							

// 		});

//	} );

</script>


<div id="processing_message" style="display:none" title="Processing">Please wait while your request is being processed...</div>


<div class="container-fluid">
  	<div class="row-fluid">

  		<div class="span2">
		  	<div class="well sidebar-nav">
		    	<ul class="nav nav-list">
		      		<li class="nav-header">Sidebar</li>
		      		<?php 
						echo '<li class="">'.$this->Html->link('Applications',array('controller'=>'applications','action'=>'index')).'</li>';
					?>
					<?php 
						echo '<li class="">'.$this->Html->link('--'.h($sonapp['Application']['name']),array('controller'=>'applications','action'=>'View',$sonapp['Application']['id']))."</li>";
					?>
					<?php 
						echo '<li class="">'.$this->Html->link('----'. h($saversion['Version']['name']),array('controller'=>'versions','action'=>'View',$saversion['Version']['id']))."</li>";
					?>
					<?php 
						echo '<li class="active">'.$this->Html->link('------'. h($satable['Table']['name']),array('controller'=>'tables','action'=>'View',$satable['Table']['id']))."</li>";
					?>
					</li>
					<li></br></li>
		    	</ul>
		  	</div><!--/.well -->
		</div><!--/span-->

		<div class="span10">
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">
						<?php echo $this->Session_gpp->flash();
					            //'Message.success');
					            ?>
				 	</div>
				</div>

				<div class="row-fluid">
					<div class="span12">
						<div class="navbar"/>
							<div class="navbar-inner_gpp">
								<div class="container-fluid">
									<div class="nav-collapse">
										<div class="row-fluid">
											<div class="span2">
												<p>
													<button id="btnAddNewRow" class="btn btn-primary btn-small">Add</button>
												</p>
											</div>
											<div class="span1">
											</div>
											<div class="span2">
												<p>
													<button id="btnDeleteRow" class="btn btn-danger btn-small">Delete</button>
												</p>
											</div>
											<div class="span1">
											</div>
											<div class="span2">
												<p>
													<?php echo $this->Html->link(__('Annuler'),array('controller'=>'dynamiques','action'=>'DynamiqueOfTable',$satable['Table']['id']), array('class'=>'btn btn-inverse btn-small')); ?>
												</p>
											</div>
											<!--div class="add_delete_toolbar span2" /-->
											<div class="span4">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="page-header">
							<?php if (isset($colonnes)){ ?>

								<!-- Custom form for adding new records -->
								<form style="display:none" id="formAddNewRow" action="#" title="Add new ligne">
								     <ul>
								       	<li>CODSOC
											<input type="text" name="codsoc" id="codsoc" class="required" rel="0" />
										</li>
								        <li>CODTBL
										<input type="text" name="codtbl" id="codtbl" rel="1" />
										</li>
									</ul>
								        <label for="CLETBL">CLETBL</label>
										<input type="text" name="cletbl" id="cletbl" rel="1" />
								        <label for="CODTBL">CODTBL</label>
										<input type="text" name="codtbl" id="codtbl" rel="1" />
								        <label for="CODTBL">CODTBL</label>
										<input type="text" name="codtbl" id="codtbl" rel="1" />
								        <label for="CODTBL">CODTBL</label>
										<input type="text" name="codtbl" id="codtbl" rel="1" />
								        <label for="CODTBL">CODTBL</label>
										<input type="text" name="codtbl" id="codtbl" rel="1" />
								        <label for="CODTBL">CODTBL</label>
										<input type="text" name="codtbl" id="codtbl" rel="1" />
								        <label for="CODTBL">CODTBL</label>
										<input type="text" name="codtbl" id="codtbl" rel="1" />
								        <br />
								        <!--label for="platforms">Platform(s)</label><br />
										<textarea name="platforms" id="platforms" rel="2"></textarea>
								        <br />
								        <label for="version">Engine version</label><br />
										<select name="version" id="version" rel="3">
							                <option>1.5</option>
							                <option>1.7</option>
							                <option>1.8</option>
								        </select>
								        <br />
								        <label for="grade">CSS grade</label><br />
										<input type="radio" name="grade" value="A" rel="4"> First<br>
										<input type="radio" name="grade" value="B" rel="4"> Second<br>
										<input type="radio" name="grade" value="C" checked rel="4"> Third
								        <br /-->
								</form>

								<?php //echo $this->Form->create('Dynamique');?>
									<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="myDataTable">
										<thead>
											<tr>
												<td/>
												<td><input type="text" name="search_engine" value="Search engines" class="search_init" /></td>
												<?php foreach ($colonnes as $colonne): 
													echo '<td><input class="search_init" value="Search engines" name=search_"'.h($colonne['Colonne']['name']).'"/></td>';
												endforeach; ?>
											</tr>
											<tr>
												<th/>
												<th width="200" id="id">id</th>
												<?php foreach ($colonnes as $colonne): 
													echo '<th width="200" class="editable" id="'.h($colonne['Colonne']['name']).'" name="'.h($colonne['Colonne']['name']).'" class="editable">
															<a href="#" rel="popover" id="'.h($colonne['Colonne']['name']).'_a" title="'.__($colonne['Colonne']['name']).'"  data-content="'.str_replace('\n','</br>',h($colonne['Colonne']['description'])).'" />'
																.h($colonne['Colonne']['name'])
															.'</a>
														</th>';
												endforeach; ?>
											</tr>
										</thead>
										<!--tbody id="tbodyLigne"-->
										<!--/tbody-->
									</table>

									<script type="text/javascript" charset="utf-8">
									  	$(function () {
									  		<?php foreach ($colonnes as $colonne): 
												echo "$('#".__($colonne['Colonne']['name'])."_a').popover('hide');";
											endforeach; ?>
										    $('#test').popover('hide');
											$('#test3').tooltip('hide');
										})
									</script>

									<!-- Place holder where add and delete buttons will be generated -->

	
								<?php //echo $this->Form->end(__('Submit'));?>
							<?php }?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
